@import "../common.scss";

body {
	background-color: #fff;
}

.content {
	.already-join{
		height: ws(35);
		font-size: ws(14);
		display: flex;
		align-items: center;
		justify-content: center;
		color: $main-color;
		background-color: lighten($main-color, 30%);
		margin-bottom: ws(10);
	}
	.wapper {
		margin: 0 ws(15);
		position: relative;
		border-radius: ws(10);
		padding-bottom: ws(60/2);
		box-shadow: 0 ws(3/2) ws(30/2) 0 rgba(24, 127, 217, 0.2);
		.swiper {
			border-radius: ws(10) ws(10) 0 0;
			overflow: hidden;
			.swiper-wrapper {
				height: ws(300);
				border-radius: ws(10) ws(10) 0 0;
				.swiper-slide {
					border-radius: ws(10) ws(10) 0 0;
					.swiper-img {
						border-radius: ws(10) ws(10) 0 0;
						width: 100%;
						height: ws(300);
						object-fit: cover;
						opacity: 0.8;
					}
				}
			}
			.swiper-pagination-bullet-active {
				background-color: #FFFFFF;
			}
		}
		.Centered{
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		.title{
			font-size: ws(17);
			color: $main-color;
			margin-bottom: ws(5);
		}
		.details{
			padding: ws(15) ws(25);
		}
		.author{
			display: flex;
			justify-content: flex-end;
			padding-right: ws(25);
		}
		.ipone{
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: ws(-30);
			width: ws(130/2);
			height: ws(130/2);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 ws(2) ws(5)  rgba($main-color,.5);
			background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
			> img {
				width: ws(30);
				height: ws(30);
			}
		}
		.btn{
			position: absolute;
			left: 0;
			right: 0;
			width: 50%;
			bottom: ws(-20);
			margin: auto;
			height: ws(40);
			line-height: ws(40);
			text-align: center;
			z-index: 10;
			color: #fff;
			border-radius: ws(40);
			> span{
				line-height: ws(22);
				letter-spacing: ws(2);
			}
		}
		.btn-color1{
			background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
			box-shadow: 0 ws(2) ws(5)  rgba($main-color,.5);
		}
		.btn-color2{
			background-image: linear-gradient(-10deg, darken(#DD524D, 10%) 0%, lighten(#DD524D, 10%) 100%);
		box-shadow: 0 ws(2) ws(5)  rgba(#DD524D,.5);
		}
		.btn-color3{
			background-image: linear-gradient(-10deg, darken(#999, 10%) 0%, lighten(#999, 10%) 100%);
		box-shadow: 0 ws(2) ws(5)   rgba(#999,.5);
		}
	}
	.desc{
		margin-top: ws(60);
		padding: 0 ws(20);
		padding-bottom: ws(50);
		.desc-title{
			@include border-line(#e4e1e1, bottom);
		}
		.item{
			display: flex;
			align-items: center;
			height: ws(27/2);
			.icon{
				width: ws(35/2);
				height: ws(35/2);
				margin-bottom: ws(2);
				margin-right: ws(5);
			}
			.text {
				line-height: ws(14);
			}
		}
	}
}

.succeed{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: ws(50);
	margin-bottom: ws(100);
	> img{
		width: ws(100);
		opacity: .8;
	}
	> span{
		margin-top: ws(10);
		font-size: ws(16);
		color: $main-color;
	}
}

.succeed-btn{
	width: 60%;
	margin: auto;
	margin-top: ws(15); 
	height: ws(40);
	box-shadow: 0 0 0 ws(1) $main-color;
	line-height: ws(40);
	text-align: center;
	z-index: 10;
	color: $main-color;
	border-radius: ws(40);
}
